<template>
  <el-dialog v-loading="loading" left title="二维码生成" width="800px" :visible.sync="visible" @cancel="close">
    <el-row style="height: 260px">
      <el-col :span="14">
        <el-form ref="form" :rules="rules" size="middle" :model="form" label-width="100px" label-position="left">
          <el-form-item label="app id" prop="appId">
            <el-input v-model="form.appId" readonly />
          </el-form-item>

          <el-form-item label="类型" prop="qrcodeType">
            <el-select v-model="form.qrcodeType" placeholder="请选择">
              <el-option label="体验版二维码" :value="0" />
              <el-option label="小程序码(无限)" :value="1" />
              <el-option label="小程序码(有限)" :value="2" />
              <el-option label="普通二维码(有限)" :value="3" />
            </el-select>
          </el-form-item>

          <el-form-item label="页面" prop="pagePath">
            <el-input v-model="form.pagePath" placeholder="请填入小程序页面路径" />
          </el-form-item>

          <el-form-item v-if="form.qrcodeType === 1" prop="scene" label="场景值">
            <el-input v-model="form.scene" placeholder="场景值" />
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="10" flex>
        <img v-if="qrcode" :src="qrcode" class="qrcode-img">
        <div v-else class="qrcode-img" style="border: 1px solid #ddd" />
      </el-col>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSave">立即生成</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { genQrcode } from '@/api/wxapp'

export default {
  name: 'GenQrcodeDialog',
  data() {
    return {
      loading: false,
      visible: false,
      appId: '',
      reject: null,
      resolve: null,
      qrcode: '',
      form: {
        appId: '',
        qrcodeType: '',
        pagePath: '',
        scene: ''
      },
      rules: {
        pagePath: [{
          required: true,
          message: '请输入小程序页面路径',
          trigger: 'blur'
        }
        ], scene: [{
          required: true,
          message: '请输入小程序场景值',
          trigger: 'blur'
        }
        ]
      }
    }
  },
  methods: {
    show(appId) {
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
        this.visible = true

        this.qrcode = ''
        this.form.appId = appId
        this.form.qrcodeType = 1
        this.form.pagePath = ''
        this.form.scene = ''
        this.$refs.form.resetFields()
      })
    },
    close() {
      this.visible = false
      this.resolve = null
      this.reject = null
    },
    handleSave() {
      if (this.loading) {
        return
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = {
            appId: this.form.appId,
            page: this.form.pagePath,
            scene: this.form.scene,
            qrcodeType: this.form.qrcodeType
          }
          this.qrcode = ''
          this.loading = true
          genQrcode(data).then(res => {
            this.loading = false
            if (res.code === 0) {
              this.qrcode = res.data
            }
          }).catch(e => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
  .qrcode-img {
    width: 200px;
    height: 200px;
    margin-left: 60px;
    margin-top: 20px;
  }
</style>
